import { trendRank } from '@/services/api/api-analysis';
import { DrawerForm } from '@ant-design/pro-form';
import ProList from '@ant-design/pro-list';
import { Avatar, Card, Empty, List, Progress, Skeleton, Spin } from 'antd';
import { useEffect, useRef, useState } from 'react';
import styles from './TrendCuesRankCardStyle.less';
import './TrendCuesRankCardStyle.less';
import e from 'express';
import Paragraph from 'antd/lib/typography/Paragraph';
import { ActionType } from '@ant-design/pro-table';
import React from 'react';

interface TrendCuesRankCardProps {
  type: string
  organizationTopId: string
  dates: string[]
}

const TrendCuesRankCard: React.FC<TrendCuesRankCardProps> = (props) => {

  const { type, organizationTopId, dates } = props

  //前三名奖品图片
  const rankIcon = [
    '/image/排行榜第一名（56X56）.png',
    '/image/排行榜第二名（56X56）.png',
    '/image/排行榜第三名（56X56）.png',
  ];

  //排行榜的滚动条
  const mylist = document.getElementById('list')

  const [dataTrendCuesRank, setDataTrendCuesRankState] =
    useState<AnalysisData.TrendRank[]>([]);

  const [loading, setLoading] = useState(true);
  //加载骨架屏
  const [skeletonLoadding, setSkeletonState] =
    useState<boolean>(true);
  /**
   * 线索征集
   * @param key
   */
  const loadTrendCuesRankData = async () => {
    try {
      const response = await trendRank({ type, organizationTopId, dates });
      if (response.code === 0) {
        setDataTrendCuesRankState(response.data);
      }
      console.log(response.data);

      setLoading(false)
      setSkeletonState(false)
    } catch (error) { }
  };
  // const getMaxCount = (i) => {
  //   const maxCount = dataTrendCuesRank[i].data.reduce((max, item) => {
  //     return item.count > max ? item.count : max;
  //   }, 0);
  //   return maxCount
  // }

  //排行榜列表
  const renderRank = (item: AnalysisData.TrendRank, index: number) => {

    let max = 1
    if (dataTrendCuesRank.length > 0) {
      max = dataTrendCuesRank[0].count + dataTrendCuesRank[0].count / 10
    }



    return (
      <>
        <Card key={item.organizationId} style={{
          width: '100%',
          borderRadius: '0',
          boxShadow: 'none',
          padding: '4px'
        }} bordered={false} bodyStyle={{ height: 22 }}>
          <Card.Meta
            avatar={
              <>
                <div style={{ width: '30px' }}>
                  {index <= 2 ? <Avatar size={38} src={rankIcon[index]} ></Avatar> : <div
                    style={{
                      backgroundColor: '#5083E1',
                      borderRadius: '50%',
                      width: '25px',
                      height: '25px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      marginLeft: '8px',
                      marginTop: '5px',
                      color: 'white',
                    }}
                  >
                    {index + 1}
                  </div>
                  }
                </div>
              </>
            }
            title={
              <>
                <div
                  style={{
                    marginTop: '9px',
                    width: '100%',
                    display: 'flex',
                  }}
                >
                  {/* <div style={{ width: '20%', fontSize: '11px' }}>{item?.organizationName.length > 6
                    ? item.organizationName.slice(0, 8) + '...'
                    : item.organizationName}
                  </div> */}
                  <Paragraph ellipsis={true} style={{ width: '25%', fontSize: '11px' }}>
                    {item?.organizationName}
                  </Paragraph>
                  <div style={{ marginTop: '-5px', width: '65%' }}>
                    <Progress
                      percent={Math.round((Math.abs(item.count) / max) * 100)}
                      format={(percent) => `${item.count}${type === "0" ? "分" : type === "1" ? "篇" : type === "2" ? "分" : type === "3" ? "分" : "分"}`}
                      style={{ marginLeft: '5%' }}
                      strokeWidth={11}
                      // trailColor='red'
                      strokeColor={Number(item.count) > 0 ? '' : 'red'}
                    />
                  </div>
                </div>

              </>
            }
          />
        </Card>
      </>
    );
  };

  useEffect(() => {
    setLoading(true)
    loadTrendCuesRankData();
    if (mylist) {
      mylist.scrollTop = 0
    }
  }, [type, organizationTopId, dates]);

  return (
    <>
      <Skeleton avatar title={false} loading={skeletonLoadding} active>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <span style={{ fontWeight: 'bold' }}>{type === "0" ? "综合传播影响力" : type === "1" ? "报送排行" : type === "2" ? "收录排行" : type === "3" ? "全媒体传播质效" : type === "4" ? "签到推广" : type === "10" ? "新闻传播工作质效" : type === "20" ? "媒情网情社情转交办事项回复质效" : type === "30" ? "文化繁荣质效"
            : "文化遗产保护质效"}</span>
          <DrawerForm
            title={type === "0" ? "综合传播影响力" : type === "1" ? "报送排行" : type === "2" ? "收录排行" : type === "3" ? "全媒体传播质效" : type === "4" ? "签到推广" : type === "10" ? "新闻传播工作质效" : type === "20" ? "媒情网情社情转交办事项回复质效" : type === "30" ? "文化繁荣质效"
            : "文化遗产保护质效"}
            trigger={
              <a hidden={!(dataTrendCuesRank && dataTrendCuesRank?.length > 0)} style={{ fontWeight: 'bold' }}>详情</a>
            }
            submitter={false}
            width={400}
          >
            <ul className={styles.rankingList} style={{
              margin: "-25px 0 0"
            }}>
              {
                dataTrendCuesRank && dataTrendCuesRank?.length > 0 ? dataTrendCuesRank?.map((item, i) => (
                  <li key={item.organizationId}>
                    <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                      {i + 1}
                    </span>
                    <span className={styles.rankingItemTitle} title={item.organizationName}>
                      {item.organizationName}
                    </span>
                    <span>{item.count}{type === "1" ? "篇" : type === "2" ? "篇" : "分"}</span>
                  </li>
                )) : <Empty />
              }
            </ul>
          </DrawerForm>
        </div>
        <Spin spinning={loading}>
          {/* <ul className={styles.rankingList}>
            {
              dataTrendCuesRank && dataTrendCuesRank?.slice(0, 10)?.length > 0 ? dataTrendCuesRank?.slice(0, 10)?.map((item, i) => (
                <li key={item.organizationId}>
                  <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                    {i + 1}
                  </span>
                  <span className={styles.rankingItemTitle} title={item.organizationName}>
                    {item.organizationName}
                  </span>
                  <span>{item.count}{type === "1" ? "篇" : type === "2" ? "篇" : "分"}</span>
                </li>
              )) : <Empty />
            }
          </ul> */}
          <div className="hide-scrollbar" id='list'>
            <List<any>
              bordered={false}
              dataSource={dataTrendCuesRank}
              style={{
                width: '100%',
                maxHeight: "350px"
              }}
              itemLayout='vertical'
              renderItem={(item, index) => renderRank(item, index)}
            />
          </div>
        </Spin>
      </Skeleton>
    </>
  );
};

export default TrendCuesRankCard;
